<template>
  <div class="com-container">
    <div class="com-chart" ref="sellerBar"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: null,//服务器返回的数据
    };
  },
  destroyed() {
    //销毁监听事件以防止内存泄漏
    window.removeEventListener('resize',this.resizeEcharts)
  },
  //vue写方法的钩子
  methods: {
    //初始化echartsInstance对象
    initChart() {
      this.chartInit = this.$echarts.init(this.$refs.sellerBar, 'chalk');
      //初始化option
      const initOption = {
      }
      this.chartInit.setOption(initOption)
    },
    //获取服务器数据
    async getData() {
      const { data: ret } = await this.$http.get('seller');
      this.allData = ret
      this.updataChart();
    },
    //更新图表
    updataChart() {
      //计算一共多少页
      //添加了数据的option
      const dataOption = {
      }
      this.chartInit.setOption(dataOption)
    },
    //动态适配电脑的分辨率
    resizeEcharts() {
      const resizeOption = {
      }
      this.chartInit.setOption(resizeOption)
      this.chartInit.resize()
    }
  },
  mounted() {
    this.initChart();
    this.getData(),
    //监听window窗口的大小变化
    window.addEventListener('resize', this.resizeEcharts)
    this.resizeEcharts()
  },
};
</script>

<style lang="less">
</style>